<template>
  <div class="video-file-details">
    <template v-if="fileInfo?.video_info">
      <div v-if="fileInfo.video_info.thumbnail" class="video-preview">
        <img :src="fileInfo.video_info.thumbnail.url" :alt="fileInfo?.name">
        <div class="video-dimensions">
          {{ fileInfo.video_info.video.width }} × {{ fileInfo.video_info.video.height }} 像素
        </div>
      </div>

      <el-descriptions :column="1" border v-if="fileInfo?.video_info">
        <el-descriptions-item label="视频信息">
          <div class="video-details">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <div class="label">时长</div>
                  <div class="value">{{ fileInfo.video_info.duration_format }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <div class="label">分辨率</div>
                  <div class="value">{{ fileInfo.video_info.video.width }}×{{ fileInfo.video_info.video.height }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <div class="label">帧率</div>
                  <div class="value">{{ fileInfo.video_info.video.fps }} FPS</div>
                </div>
              </el-col>
            </el-row>

            <el-divider content-position="left">视频流信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="detail-item">
                  <div class="label">视频编码</div>
                  <div class="value">{{ fileInfo.video_info.video.codec_long_name }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <div class="label">比特率</div>
                  <div class="value">{{ formatBitrate(fileInfo.video_info.video.bitrate) }}</div>
                </div>
              </el-col>
            </el-row>

            <el-divider content-position="left">音频流信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <div class="label">音频编码</div>
                  <div class="value">{{ fileInfo.video_info.audio.codec }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <div class="label">声道</div>
                  <div class="value">{{ fileInfo.video_info.audio.channel_layout }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <div class="label">采样率</div>
                  <div class="value">{{ fileInfo.video_info.audio.sample_rate }} Hz</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </template>

    <template v-else>
      <el-alert
        title="视频信息未获取"
        type="info"
        description="您可以通过视频处理功能获取视频信息，详情请参考文档"
        show-icon
      >
        <template #default>
          <el-link
            href="https://help.aliyun.com/zh/imm/developer-reference/user-guide-for-x-oss-process"
            type="primary"
            target="_blank"
          >
            查看文档
          </el-link>
        </template>
      </el-alert>
    </template>

    <BaseFileDetails :file-info="fileInfo" />
  </div>
</template>

<script setup lang="ts">
import BaseFileDetails from './BaseFileDetails.vue'
import type { FileInfo } from '../../types'

defineProps<{
  fileInfo: FileInfo | null
}>()

const formatBitrate = (bitrate: number) => {
  if (bitrate > 1000000) {
    return `${(bitrate / 1000000).toFixed(2)} Mbps`
  }
  return `${(bitrate / 1000).toFixed(2)} Kbps`
}
</script>

<style scoped lang="scss">
.video-preview {
  margin: 20px 0;
  text-align: center;
  
  img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .video-dimensions {
    margin-top: 8px;
    color: #909399;
    font-size: 13px;
  }
}

.video-details {
  .el-divider {
    margin: 16px 0;
    
    :deep(.el-divider__text) {
      font-size: 13px;
      color: #909399;
    }
  }

  .detail-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;

    .label {
      color: #909399;
      font-size: 12px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

    .value {
      color: #303133;
      font-size: 14px;
      font-weight: 500;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      word-break: break-all;
      line-height: 1.4;
    }
  }
}

:deep(.el-descriptions__cell) {
  &.el-descriptions__label {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }
}
</style> 